<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式网站</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/public.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
</head>
<body>
<!--头部-->
<header class="header">
    <div class="pubCon hdCon">
        <div class="hdLogo">
            <img src="images/hd_logo.png" alt="">
        </div>
        <div class="hdNav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">案例</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="#">新闻资讯</a></li>
            </ul>
        </div>
        <div class="hdMenu">
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</header>
<!--海报-->
<div class="banner">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#" class="big" style="background-image: url('images/banner1.jpg');"></a>
                <a href="#" class="small" style="background-image: url('images/small1.jpg');"></a>
            </div>
            <div class="swiper-slide">
                <a href="#" class="big" style="background-image: url('images/banner2.jpg');"></a>
                <a href="#" class="small" style="background-image: url('images/small2.jpg');"></a>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</div>
<script>
    var btnSwiper = new Swiper('.banner .mySwiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: ".swiper-pagination",
        },
    })
</script>

<!--服务-->
<section class="service">
    <div class="pubTit">
        <h2>我们专注服务</h2>
        <div class="line"></div>
    </div>
    <div class="pubCon serCon">
        <a href="#" class="box">
            <div class="boxIcon">
                <i class="iconfont icon-shouji"></i>
            </div>
            <h3>App开发</h3>
            <p>以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高...</p>
        </a>
        <a href="#" class="box">
            <div class="boxIcon"><i class="iconfont icon-wangzhanjianzhan"></i></div>
            <h3>网站开发</h3>
            <p>以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高...</p>
        </a>
        <a href="#" class="box">
            <div class="boxIcon"><i class="iconfont icon-gouwuche"></i></div>
            <h3>电商设计</h3>
            <p>以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高...</p>
        </a>
        <a href="#" class="box">
            <div class="boxIcon"><i class="iconfont icon-jiaoyu"></i></div>
            <h3>技能教育</h3>
            <p>以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高...</p>
        </a>
    </div>

</section>

<section class="about">
    <div class="pubTit abtTit">
        <h2>我们是不断创新、专注研究、充满活力的<br>用户体验专家</h2>
        <div class="line"></div>
    </div>
    <div class="pubCon abtCon">
        <div class="abtText">
            唯品互动网络成立于2010年，我是是一家具有创新、追求、责任、活力设计开发公司。专注于移动互联网与智能可穿戴设备领域,主要为客户提供APP设计开发、网站设计开发、软件设计开发、工业设计,全方位个性
            化设计开发服务。我们的价值与宗旨是为用户和客户打造最nice的设计，用设计提升产品和企业价值。
        </div>
        <div class="btnGroup">
            <a href="#" class="btn btnLeft">咨询我们</a>
            <a href="#" class="btn btnRight">了解更多</a>
        </div>
    </div>
</section>

<!--项目案例-->
<section class="case">
    <div class="pubTit">
        <h2>项目案例展示</h2>
        <div class="line"></div>
    </div>

    <div class="pubCon caseCon">
        <a href="#" class="box">
            <img class="pic" src="images/case1.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
        <a href="#" class="box">
            <img class="pic" src="images/case2.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
        <a href="#" class="box">
            <img class="pic" src="images/case3.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
        <a href="#" class="box">
            <img class="pic" src="images/case4.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
        <a href="#" class="box">
            <img class="pic" src="images/case5.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
        <a href="#" class="box">
            <img class="pic" src="images/case6.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
        <a href="#" class="box">
            <img class="pic" src="images/case7.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
        <a href="#" class="box">
            <img class="pic" src="images/case8.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
        <a href="#" class="box">
            <img class="pic" src="images/case9.jpg" alt="">
            <div class="ceng">
                <h3>这是标题文字</h3>
                <div class="line"></div>
                <p>这是描述文字这是描述文字这是描述文字这是描述文字这是描述文字</p>
            </div>
        </a>
    </div>

</section>

<!--服务的客户-->
<section class="client">
    <div class="pubTit">
        <h2>我们服务的客户</h2>
        <div class="line"></div>
    </div>
    <div class="pubCon clientCon">
        <a href="#" class="box">
            <img src="images/l1.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l2.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l3.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l4.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l5.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l6.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l7.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l8.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l9.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l10.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l11.jpg" alt="">
        </a>
        <a href="#" class="box">
            <img src="images/l12.jpg" alt="">
        </a>
    </div>
</section>

<!--footer-->
<section class="footer">
    <div class="pubCon ftMain">
        <a href="#" class="ftLogo">
            <img src="images/hd_logo.png" alt="">
            <div class="text">
                <p>weipin.com</p>
                <h1>唯品互动网络科技</h1>
            </div>
        </a>
        <div class="ftCon">
            <div class="ftContact">
                <h4>商务合作</h4>
                <p>
                    邮箱：1513573894@163.com <br>
                    手机：13088886666<br>
                    Q Q：51333338888 <a target="_blank" href="tencent://message/?uin=1129946047&Menu=yes">点击交谈</a><br>
                    微博：@唯品互动网络<br>
                </p>
            </div>

            <div class="ftLink">
                <div class="box">
                    <h4>服务</h4>
                    <a href="#">全部</a>
                    <a href="#">APP开发</a>
                    <a href="#">网站设计制作</a>
                    <a href="#">电商设计</a>
                    <a href="#">技能教育</a>
                </div>

                <div class="box">
                    <h4>服务</h4>
                    <a href="#">全部</a>
                    <a href="#">APP开发</a>
                    <a href="#">网站设计制作</a>
                    <a href="#">电商设计</a>
                    <a href="#">技能教育</a>
                </div>

                <div class="box">
                    <h4>服务</h4>
                    <a href="#">全部</a>
                    <a href="#">APP开发</a>
                    <a href="#">网站设计制作</a>
                    <a href="#">电商设计</a>
                    <a href="#">技能教育</a>
                </div>
            </div>


            <div class="ftEwm">
                <img src="images/erweima.png" alt="">
                <p>唯品微信公众号</p>
            </div>
        </div>

    </div>
    <div class="copyright">
        版权所有&copy;<a href="#">唯品互动</a>Copyright 2010-<span class="year"></span> weipin design All rights reserved <a
            href="#" target="_blank">鲁ICP备110000000号</a>
    </div>
</section>
<script>
    var year = new Date().getFullYear();
    $('.year').html(year);
</script>

<!-- 屏幕的遮罩层 -->
<div class="bodyBg"></div>

</body>
</html>
